<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jsMind</title>
        <link
            type="text/css"
            rel="stylesheet"
            href="//jsd.onmicrosoft.cn/npm/jsmind@0.8.8/style/jsmind.css"
        />
        <style type="text/css">
            #jsmind_container {
                width: 800px;
                height: 500px;
                border: solid 1px #ccc;
                background: #f4f4f4;
            }
        </style>
    </head>

    <body>
        <div id="jsmind_container"></div>
        <script src="//jsd.onmicrosoft.cn/npm/jsmind@0.8.8/es6/jsmind.js"></script>
        <script src="//jsd.onmicrosoft.cn/npm/jsmind@0.8.8/es6/jsmind.draggable-node.js"></script>
        <script type="text/javascript">
            function load_jsmind() {
                var mind = {
                    meta: {
                        name: 'demo',
                        author: 'hizzgdev@163.com',
                        version: '0.2',
                    },
                    format: 'node_array',
                    data: [
                        { id: 'root', isroot: true, topic: 'jsMind' },

                        {
                            'id': 'sub1',
                            'parentid': 'root',
                            'topic': 'sub1',
                            'background-color': '#0000ff',
                        },
                        { id: 'sub11', parentid: 'sub1', topic: 'sub11' },
                        { id: 'sub12', parentid: 'sub1', topic: 'sub12' },
                        { id: 'sub13', parentid: 'sub1', topic: 'sub13' },

                        { id: 'sub2', parentid: 'root', topic: 'sub2' },
                        { id: 'sub21', parentid: 'sub2', topic: 'sub21' },
                        {
                            'id': 'sub22',
                            'parentid': 'sub2',
                            'topic': 'sub22',
                            'foreground-color': '#33ff33',
                        },

                        { id: 'sub3', parentid: 'root', topic: 'sub3' },
                    ],
                };
                var options = {
                    container: 'jsmind_container',
                    editable: true,
                    theme: 'primary',
                };
                var jm = new jsMind(options);
                jm.show(mind);
                // jm.set_readonly(true);
                // var mind_data = jm.get_data();
                // alert(mind_data);
                jm.add_node('sub2', 'sub23', 'new node', { 'background-color': 'red' });
                jm.set_node_color('sub21', 'green', '#ccc');
            }

            load_jsmind();
        </script>
    </body>
</html>
